<template>
    <div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <form class="p-4">
                        <div class="mb-3">
                            <label for="InputName" class="form-label">请输入您的用户名称</label>
                            <input type="email" class="form-control" id="InputName" aria-describedby="emailHelp"
                                v-model="registerInfo.name" />
                        </div>
                        <div class="mb-3">
                            <label for="InputEmail1" class="form-label">请输入您的邮箱地址/电话号码/账号</label>
                            <input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp"
                                v-model="registerInfo.account" />
                        </div>
                        <div class="mb-3">
                            <label for="InputPassword" class="form-label">请输入密码</label>
                            <input v-model="registerInfo.password" type="password" autocomplete='on'
                                class="form-control" id="InputPassword" />
                        </div>
                        <div class="mb-3">
                            <label for="againPassword" class="form-label">请再次输入密码</label>
                            <!-- <div id="emailHelp" class="form-text">
                                        请在此输入密码，确保您输入的密码正确。
                                    </div> -->
                            <input autocomplete='on' type="password" class="form-control" id="againPassword"
                                v-model="registerInfo.repassword" />
                        </div>
                        <div class="">
                            <!-- <input type="checkbox" class="form-check-input" id="exampleCheck1" />
                                    <label class="form-check-label" for="exampleCheck1">记住我</label> -->
                            <label for="CodeID" class="form-label">请输入验证码</label>
                            <div class="d-flex align-items-center">
                                <verificationCode ref="Code"></verificationCode>
                                <input type="text" class="form-control ms-2" id="CodeID" v-model="registerInfo.Code" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        取消
                    </button>
                    <button @click="registerHandle" type="button" class="btn btn-primary">
                        注册/登录
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed } from 'vue';
import { register } from '../../../request/user';

const data = reactive({})
onBeforeMount(() => {
    //console.log('2.组件挂载页面之前执行----onBeforeMount')
})
onMounted(() => {
    //console.log('3.-组件挂载到页面之后执行-------onMounted')
})
watchEffect(() => {
})
// 使用toRefs解构
// let { } = { ...toRefs(data) } 
defineExpose({
    ...toRefs(data)
})
const Code = ref(); //验证码ref
const registerInfo = reactive({
    name: "error.response",
    account: "123456@qqcom",
    password: "123456@qqcom",
    repassword: "123456@qqcom",
    Code: "",
});
const registerHandle = () => {
    //   register(registerInfo);
    const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
    const regMobile =
        /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
    //   register(registerInfo);
    // (Code.value.validate(registerInfo.Code)
    if (true) {
        if (
            regEmail.test(registerInfo.account) ||
            regMobile.test(registerInfo.account)
        ) {
            if (registerInfo.password !== registerInfo.repassword) {
                alert("两次输入密码不一致");
            } else {
                register(registerInfo).then((res: any) => {
                    console.log(res);
                    localStorage.setItem("token", res.token);
                });
            }
        } else {
            alert("请输入正确的手机号或者邮箱");
        }
    } else {
        alert("验证码错误");
    }
};
</script>
<style scoped lang='scss'>

</style>